<template>
  <div class="flex justify-center items-center">
    <h3 class="text-2xl font-medium">{{ $t("biddingMode.DataDriven") }}</h3>
  </div>
  <div class="data-content flex flex-col justify-start items-start">
    <div class="w-full flex justify-between items-center">
      <div style="width: 42%"></div>
      <div class="w-[58%] flex justify-center items-center">
        <p class="first">
          <span>{{ $t("biddingMode.DataDrivenTip1") }}</span>
          <span>{{ $t("biddingMode.DataDrivenTip2") }}</span>
        </p>
      </div>
    </div>
    <div class="w-full flex justify-between items-center">
      <div style="width: 42%"></div>
      <div class="w-[58%] flex justify-center items-center">
        <p class="second">
          <span>{{ $t("biddingMode.DataDrivenTip3") }}</span>
          <span>{{ $t("biddingMode.DataDrivenTip4") }}</span>
        </p>
      </div>
    </div>
    <div class="w-full flex justify-between items-center">
      <div style="width: 42%"></div>
      <div class="w-[58%] flex justify-center items-center">
        <p class="three">
          <span>{{ $t("biddingMode.DataDrivenTip5") }}</span>
          <span>{{ $t("biddingMode.DataDrivenTip6") }}</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script setup></script>
<style lang="scss" scoped>
.data-content {
  width: 100%;
  height: 480px;
  margin-top: 2%;
  background: url("@/assets/images/biddingMode/dataBg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  position: relative;
  padding: 1%;
  div {
    height: 140px;
    margin-bottom: 1%;
  }
  p {
    max-width: 540px;
    font-size: 14px;
    color: #727275;
    span {
      display: inline-block;
      margin-bottom: 2%;
    }
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    span {
      margin-bottom: 2%;
    }
  }
}
</style>
